Charts Style#

The Chart component in the Scripting app provides a highly customizable interface for creating and displaying various types of charts. This documentation explains how to use the properties of the Chart view to configure axes, scales, labels, legends, and more.

1. Axis Visibility#

• chartXAxis

  • Type: "automatic" | "hidden" | "visible"
  • Description: Sets the visibility of the X-axis.
  • Example:

    1<Chart chartXAxis="visible">
    2  <BarChart ... />
    3</Chart>

• chartYAxis

  • Type: "automatic" | "hidden" | "visible"
  • Description: Sets the visibility of the Y-axis.
  • Example:

    1<Chart chartYAxis="hidden">
    2  <LineChart ... />
    3</Chart>

2. Axis Labels#

• chartXAxisLabel

  • Type:

    1{
    2  position?: "automatic" | "bottom" | "bottomLeading" | "bottomTrailing" | "leading" | "overlay" | "top" | "topLeading" | "topTrailing" | "trailing";
    3  alignment?: "leading" | "center" | "trailing";
    4  spacing?: number;
    5  content: VirtualNode;
    6}
  • Description: Adds a label to the X-axis.
  • Example:

    1<Chart
    2  chartXAxisLabel={{
    3    position: "bottom",
    4    alignment: "center",
    5    spacing: 10,
    6    content: <Text>X Axis Label</Text>,
    7  }}
    8>
    9  <BarChart ... />
    10</Chart>

• chartYAxisLabel

  • Type: Same as chartXAxisLabel.
  • Description: Adds a label to the Y-axis.
  • Example:

    1<Chart
    2  chartYAxisLabel={{
    3    position: "leading",
    4    content: <Text>Y Axis Label</Text>,
    5  }}
    6>
    7  <LineChart ... />
    8</Chart>

3. Legend#

• chartLegend
  • Type:

    1"automatic" | "hidden" | "visible" | {
    2  position?: "automatic" | "bottom" | "bottomLeading" | "bottomTrailing" | "leading" | "overlay" | "top" | "topLeading" | "topTrailing" | "trailing";
    3  alignment?: "leading" | "center" | "trailing";
    4  spacing?: number;
    5  content?: VirtualNode;
    6}
  • Description: Configures the chart legend.
  • Example:

    1<Chart
    2  chartLegend={{
    3    position: "top",
    4    alignment: "center",
    5    content: <Text>Legend</Text>,
    6  }}
    7>
    8  <AreaChart ... />
    9</Chart>

4. Scales#

• chartXScale / chartYScale
  • Type:

    1ClosedRange<number> | ClosedRange<Date> | string[] | "category" | "date" | "linear" | "log" | "squareRoot" | "symmetricLog" | {
    2  domain: ClosedRange<number> | ClosedRange<Date> | string[];
    3  type: "category" | "date" | "linear" | "log" | "squareRoot" | "symmetricLog";
    4}
  • Description: Configures the X or Y-axis scale.
  • Example:

    1<Chart
    2  chartXScale={{ domain: { from: 0, to: 100 }, type: "linear" }}
    3  chartYScale={["A", "B", "C"]}
    4>
    5  <LineChart ... />
    6</Chart>

5. Background#

• chartBackground
  • Type:

    1VirtualNode | {
    2  alignment?: "leading" | "center" | "trailing";
    3  content: VirtualNode;
    4}
  • Description: Adds a background to the chart container.
  • Example:

    1<Chart
    2  chartBackground={{
    3    alignment: "center",
    4    content: <Rectangle fill="gray" />,
    5  }}
    6>
    7  <PieChart ... />
    8</Chart>

6. Foreground Style#

• chartForegroundStyleScale
  • Type:

    1Record<string, ShapeStyle>;
  • Description: Customizes colors for marks in the chart.
  • Example:

    1<Chart
    2  chartForegroundStyleScale={{
    3    "Category 1": { color: "blue" },
    4    "Category 2": { color: "red" },
    5  }}
    6>
    7  <BarChart ... />
    8</Chart>

7. Scrollable Axes#

• chartScrollableAxes
  • Type:

    1"vertical" | "horizontal" | "all"
  • Description: Enables scrolling for the specified axes.
  • Example:

    1<Chart chartScrollableAxes="horizontal">
    2  <LineChart ... />
    3</Chart>

8. Selection#

• chartXSelection / chartYSelection / chartAngleSelection
  • Type:

    1{
    2  value: string | number | null;
    3  onChanged: (newValue: string | number | null) => void;
    4  valueType: "string" | "number";
    5}
  • Description: Enables selection for the specified axis.
  • Example:

    1<Chart
    2  chartXSelection={{
    3    value: "Category 1",
    4    onChanged: (newValue) => console.log("Selected:", newValue),
    5    valueType: "string",
    6  }}
    7>
    8  <BarChart ... />
    9</Chart>

9. Scroll Position#

• chartScrollPositionX / chartScrollPositionY
  • Type:

    1number | string | {
    2  value: number | string;
    3  onChanged: (newValue: number | string) => void;
    4}
  • Description: Sets the initial scroll position along the X or Y-axis.
  • Example:

    1<Chart
    2  chartScrollPositionX={{
    3    value: 0,
    4    onChanged: (newValue) => console.log("Scroll X:", newValue),
    5  }}
    6>
    7  <BarChart ... />
    8</Chart>

Comprehensive Example#

The following example demonstrates the usage of multiple properties to create a fully customized chart:

1<Chart
2  chartXAxis="visible"
3  chartYAxis="visible"
4  chartXAxisLabel={{
5    position: "bottom",
6    alignment: "center",
7    spacing: 8,
8    content: <Text>X Axis Label</Text>,
9  }}
10  chartYAxisLabel={{
11    position: "leading",
12    content: <Text>Y Axis Label</Text>,
13  }}
14  chartLegend={{
15    position: "top",
16    alignment: "center",
17    content: <Text>Chart Legend</Text>,
18  }}
19  chartXScale={{ domain: { from: 0, to: 100 }, type: "linear" }}
20  chartScrollableAxes="all"
21  chartForegroundStyleScale={{
22    "Category A": { color: "green" },
23    "Category B": { color: "blue" },
24  }}
25  chartBackground={{
26    content: <Rectangle fill="lightgray" />,
27  }}
28>
29  <BarChart
30    marks={[
31      { label: "A", value: 30, foregroundStyle: { color: "red" } },
32      { label: "B", value: 70 },
33    ]}
34  />
35  <LineChart
36    marks={[
37      { label: "A", value: 40 },
38      { label: "B", value: 80 },
39    ]}
40  />
41</Chart>

This example combines axis labels, scrolling, legend, scales, foreground styles, and multiple chart types in a single Chart container. Use it as a template for building your own charts.